/**
 * 邀请码菜单 邀请码管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>邀请码管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true"  class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="searchInformation" placeholder="输入邀请码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-search" @click="getTrueKey">仅可用邀请码</el-button>
        <el-button size="small" type="primary" icon="el-icon-search" @click="dialogFormVisible = true">生成邀请码</el-button>
        <el-dialog title="生成邀请码" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="使用主体" :label-width="formLabelWidth">
              <el-input v-model="form.reason" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="getKeyI">确 定</el-button>
          </div>
        </el-dialog>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="id" label="邀请码序号" width="110">
      </el-table-column>
      <el-table-column sortable prop="maker_id" label="发布者序号" width="110">
      </el-table-column>
      <el-table-column sortable prop="content" label="邀请码" width="300">
      </el-table-column>
      <el-table-column sortable prop="available" label="是否可用" width="100">
        <template slot-scope="scope" >
          <div >
            {{scope.row.available?"true":"false"}}
          </div>
        </template>
      </el-table-column>
      </el-table-column>
      <el-table-column sortable prop="addition" label="附加信息" width="100">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <div>
            <el-button size="mini" type="danger" @click="detele(scope.$index,scope.row)">撤销</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>

<script>
import { getKey,loadApplyCode,disableKey } from '../../api/basisMG.js'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      form: {
          actID:1,
          reason: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth:"200px",
      formInline: {
        page: 1,
        size:10,
        limit: 10,
      },
      searchInformation:"",
      wholeListData:[],
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 1
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline)
    this.formInline.page = this.pageparm.currentPage
    this.formInline.limit = this.pageparm.pageSize
    
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    //删除邀请码
    detele(index,row){
      let key ={
        keyID:row.id
      }
      disableKey(key)
      .then(res=>{
        console.log(res)
        this.getdata(this.formInline)
      })
    },
    //得到可用的邀请码
    getTrueKey(){
      this.listData = []
      for(var i=0;i<this.wholeListData.length;i++){
        if(this.wholeListData[i].available){
          this.listData.push(this.wholeListData[i])
        }
      }
      this.wholeListData = this.listData
      this.organizePage();
    },
    //整理页面列表
    organizePage(){
      this.listData = [] //先把基本数据置为空
      //依次把要用到的数据加入listData中
      for(var i=(this.formInline.page-1)*this.formInline.limit;i<this.wholeListData.length&&i<this.formInline.page*this.formInline.limit;i++){
        this.listData.push(this.wholeListData[i])
      }
      this.pageparm.total =this.wholeListData.length
    },
    // 获取公司列表
    getdata(parameter) {
      this.loading = true
      var fd = new FormData()
      fd.append("213",parameter)
      loadApplyCode(fd)
      .then(res=>{
        console.log(res)
        this.wholeListData = res.data
        this.listData = res.data
        this.loading = false
        this.pageparm.total = this.wholeListData.length;
        this.organizePage();
      })
      .catch(err => {
          this.loading = true
          this.$message.error('菜单加载失败，请稍后再试！')
        })

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.organizePage();
    },
    // 搜索事件
    search() {
      console.log(this.searchInformation)
      this.listData = []
      var str = ".*" + this.searchInformation + ".*"
      let reg = new RegExp(str)
      //这里通过邀请码查询
      for(var i=0;i<this.wholeListData.length;i++){
        if(reg.test(this.wholeListData[i].content)){
          this.listData.push(this.wholeListData[i])
        }
      }
      //通过附加信息查询
      for(var i=0;i<this.wholeListData.length;i++){
        if(reg.test(this.wholeListData[i].addition)){
          this.listData.push(this.wholeListData[i])
        }
      }
    },
    // 得到验证码
    getKeyI(){
        var information = {
          addition:this.form.reason
        }
        getKey(information)
        .then(res=>{
            console.log(res);
            alert(res.data)
            this.dialogFormVisible = false
            this.getdata(this.formInline)
        })
    },
    //删除公司
    deleteUser(index,row){
      this.$confirm('是否确认删除该人员','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(() =>{
        console.log(index);
        this.$message({
          type:'success',
          message:'删除了该人员'
        });
      }).catch(() =>{
        this.$message({
          type:'info',
          message:'已取消删除该人员'
        })
      })
    },
    /*
      method:jump
      跳转到用户详情页面,通过path路径跳转，带有参数为用户的ID
    */
    jump(userId){
        this.$router.push({path:"/User/userDetail", query:{userId:userId}})
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 
